<template>
  <div class="app-container">
    <div class="titles">万力轮胎压延机数据分析看板</div>
    <div class="times">{{nowtims}}</div>
    <div class="login-item">
      <!-- 左边部分 -->
      <div class="login-left">
        <div class="left-item">

          <div>
            <div class="left-herader">
              <div class="left-titles">测点分类</div>
            </div>
            <div class="left-constre">
              <indexs />
            </div>

          </div>

          <div>
            <div class="left-herader">
              <div class="left-titles">实时电流</div>
            </div>
            <div class="left-constre">
              <indexone />
            </div>

          </div>


          <div>
            <div class="left-herader">
              <div class="left-titles">实时侧轴</div>
            </div>
            <div class="left-constre">
              <indextwo />
            </div>

          </div>


        </div>
      </div>
      <!-- 中间部分 -->
      <div class="login-center">
        <div class="center-items">

          <div class="center-countse">
            <div class="center-tiltle">盒子总数</div>
            <div >
              <span  class="center-nums">{{nums1}}</span>
              <span class="center-nums-test">个</span>
            </div>
          </div>
          <div class="xian"></div>

          <div class="center-countse">
            <div class="center-tiltle">测点数据</div>
            <div>
              <span  class="center-nums">{{nums2}}</span>
              <span class="center-nums-test">个</span>
            </div>
          </div>
          <div class="xian"></div>

          <div class="center-countse">
            <div class="center-tiltle">有效数据</div>
            <div>
              <span  class="center-nums">{{nums3}}</span>
              <span class="center-nums-test">个</span>
            </div>
          </div>
          <div class="xian"></div>

          <div>
            <div class="center-tiltle">失效数据</div>
            <div>
              <span  class="center-nums">{{nums4}}</span>
              <span class="center-nums-test">个</span>
            </div>
          </div>

        </div>

        <div class="center-texil">
          <div class="center-texil-wp">
            <div class="left-herader">
              <div class="left-titles" style="width:205px;">报警统计(最近三天)</div>
            </div>
            <div class="left-constre">
              <indexsives />
            </div>
          </div>
        </div>

      </div>
      <!-- 右边部分 -->
      <div class="login-right">

        <div class="left-item">

          <div>
            <div class="left-herader">
              <div class="left-titles">实时温度</div>
            </div>
            <div class="left-constre">
              <indexsteer />
            </div>

          </div>

          <div>
            <div class="left-herader">
              <div class="left-titles">实时压力</div>
            </div>
            <div class="left-constre">
              <indexfourt />
            </div>

          </div>


          <div>
            <div class="left-herader">
              <div class="left-titles">实时数据</div>
            </div>
            <div class="left-constre">
              <indexfreet />
            </div>

          </div>


        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { queryNo } from '@/api/collection/board'
import indexs from './components/index.vue'
import indexone from './components/indexone.vue'
import indextwo from './components/indextwo.vue'
import indexsteer from './components/indexsteer.vue'
import indexfourt from './components/indexfourt.vue'
import indexfreet from './components/indexfreet.vue'
import indexsives from './components/indexsives.vue'
export default {
  name: 'Board',
  components: {
    indexs,
    indexone,
    indextwo,
    indexsteer,
    indexfreet,
    indexfourt,
    indexsives
  },
  data() {
    return {
      nowtims:'',
      nums1:'1',
      nums2:'43',
      nums3:'21',
      nums4:'22',
    }
  },
  created() {
  },
  mounted() {
    this.initChart()
    //设置定时器
    this.timer = setInterval(() => {
      // this.initChart()
      this.getTime()
    }, 1000 )
  },
  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    initChart(){
      // 盒子测点有效无效
      queryNo().then((response) => {
        this.nums1 = response[0]
        this.nums2 = response[1]
        this.nums3 = response[2]
        this.nums4 = response[3]
      })
      // this.getTime()
      this.fillZero()
    },
    getTime(){
      let now = new Date()
      let year = now.getFullYear()
      let month  = now.getMonth()
      let today = now.getDate()
      let hour = now.getHours()
      let minute = now.getMinutes()
      let secound = now.getSeconds()
      this.nowtims = year + '-' + this.fillZero(month) + '-' + this.fillZero(today) + ' ' + this.fillZero(hour) + ':' + this.fillZero(minute) + ':' + this.fillZero(secound)

    },
    fillZero(str){
      var realNum;
      if(str < 10){
        realNum = '0' +str
      }else{
        realNum = str
      }
      return realNum
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  background-image: url('../../../assets/logo/bjms.jpg');
  width: 100%;
  height: calc(100vh - 84px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.titles{
  height: 56px;
  font-size: 36px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 25px;
  text-align: center;
  padding-top: 18px;
  background-image:-webkit-linear-gradient(bottom,#09D1F4,#048CFF);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.times{
  position: absolute;
  top: 3%;
  margin-left: 20px;
  width: 937px;
  height: 46px;
  line-height: 46px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
}
.login-item{
  display: flex;
  justify-content: space-between;
  color: #fff;
  margin: 0px 20px;
  padding-top: 0.9%;
}
.login-left{
  width: 29%;
  background: rgba(10, 28, 74, 0.4);
  padding-bottom: 8px;
}
.login-center{
  width: 40%;
}
.login-right{
  width: 29%;
  background: rgba(10, 28, 74, 0.4);
  padding-bottom: 8px;
}
.left-item{
  margin:  0px 20px;
}
.left-herader{
  width: 100%;
  height: 36px;
  border-bottom: 1px solid #273A55 ;
}
.left-titles{
  width: 110px;
  height: 36px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #fff;
  line-height: 50px;
  border-bottom: 1px solid #1AFCFF;
  opacity: 1;
}
.left-constre{
  height: 180px;
  /*  */
  /* background-color: #273A55; */
  margin-top: 10px;
}
.center-items{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  position: absolute;
  top: 15%;
  margin: 0% 3%;
  width: 33%;
}
.center-tiltle{
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #94DDFF;
}
.center-display{
  display: flex;
  justify-content: space-around;
}
.center-nums{
  font-size: 36px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
}
.center-nums-test{
  margin-left: 10px;
}
.center-countse{

}
.center-texil{
  position: relative;
  top: 66%;
  height: 34%;
  background: rgba(10, 28, 74, 0.4);
}
.center-texil-wp{
  width: 95%;
  margin: 0 auto;
}
.xian{
  width: 1px;
  border: 1px solid #00FCFF;
}
</style>
